<template>
    <div class="my">
        <van-nav-bar title="我的中心">
            <template #right>
                <van-icon color="#000" @click="set" name="setting-o" size="18" />
            </template>
        </van-nav-bar>
        <div class="header-is" v-if="hasLogin">

            <!-- 登陆后 -->
            <div class="h-top">
                <div class="top-l">
                    <van-image width="68" height="68" round :src="userInfo.avatar" />
                    <span>{{ userInfo.nickname }}</span>
                </div>
                <div class="top-r">
                    <span>个人主页
                        <van-icon name="arrow" />
                    </span>
                </div>
            </div>

            <div class="h-footer">
                <li>
                    <em>1</em>
                    <span>头条</span>
                </li>
                <li>
                    <em>0</em>
                    <span>获赞</span>
                </li>
                <li>
                    <em>0</em>
                    <span>粉丝</span>
                </li>
                <li>
                    <em>0</em>
                    <span>关注</span>
                </li>
            </div>

        </div>

        <!-- 没登陆 -->
        <div class="header" v-else>
            <em>登陆后头条更懂你</em>
            <em>内容更有趣</em>
            <van-button type="danger" size="small" round @click="$router.push('login')">立即登录</van-button>

        </div>
        <div class="main">

            <ul class="message">
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>
                    <span>我的消息</span>
                </li>
                <li @click="$router.push('/myFav')">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingxing"></use>
                    </svg>
                    <span>收藏</span>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lishi"></use>
                    </svg>
                    <span>浏览历史</span>
                </li>
                <li @click="$router.push('/myPublish')">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodefabu"></use>
                    </svg>
                    <span>我的发布</span>
                </li>
            </ul>
            <div class="my-publish">
                <span>再小的想法，都值得被记录</span>
                <van-button type="danger" round size="small" @click="$router.push('/publish')">
                    <van-icon name="plus" />发布
                </van-button>
            </div>
            <div class="service">
                <div class="top">
                    <span class="left">更多服务</span>
                    <div><span class="right">全部

                        </span>
                        <van-icon name="arrow" />
                    </div>
                </div>
                <ul class="footer">
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-renwu"></use>
                        </svg>
                        <span>
                            任务
                        </span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-VIPfuwu"></use>
                        </svg>
                        <span>
                            vip服务
                        </span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-kefu"></use>
                        </svg>
                        <span>
                            客服中心
                        </span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-anquanzhongxin"></use>
                        </svg>
                        <span>
                            安全中心
                        </span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-dianzan"></use>
                        </svg>
                        <span>
                            点赞
                        </span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-pinglun"></use>
                        </svg>
                        <span>
                            评论
                        </span>
                    </li>

                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wenti"></use>
                        </svg>
                        <span>
                            问题
                        </span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-guanyuwomen"></use>
                        </svg>
                        <span>
                            关于我们
                        </span>
                    </li>

                </ul>
            </div>
        </div>

        <!-- 弹出层 -->
        <van-popup v-model="show" position="right" :style="{ width: '100%', height: '100%' }">
            <van-nav-bar class="myHeader" :style="{ backgroundColor: $store.state.color.baseColor }" title="设置"
                left-arrow @click-left="show = false" />
            <van-cell-group>
                <van-cell title="编辑资料" is-link @click="$router.push('/userInfo')" />
                <van-cell title="修改密码" is-link @click="$router.push('/updatePwd')" />
                <van-cell title="账号安全" is-link />
            </van-cell-group>
            <van-cell-group>
                <van-cell title="大字模式" is-link />
                <van-cell title="字体大小" value="标准" is-link />
                <van-cell title="深色模式">
                    <template #right-icon>
                        <van-switch :value="colorChecked" @input="onInput" />
                    </template>
                </van-cell>
            </van-cell-group>
            <van-cell-group>
                <van-cell title="消息设置" is-link />
                <van-cell title="隐私设置" is-link />
                <van-cell title="通用设置" is-link />
                <van-cell title="接受推送">
                    <template #right-icon>
                        <van-switch v-model="accept" />
                    </template>
                </van-cell>
            </van-cell-group>

            <van-cell-group>
                <van-cell title="关于我们" is-link />
                <van-cell title="清除缓存" value="38.4MB" is-link />
                <van-cell title="当前版本" is-link />
            </van-cell-group>
            <van-button type="primary" :color="$store.state.color.baseColor" block @click="clearLogin">退出当前账号
            </van-button>
        </van-popup>




    </div>
</template>

<script>
import { NavBar, Button, Image as VanImage, Popup, Cell, CellGroup, Switch, Dialog } from 'vant';
import { mapState, mapMutaions } from 'vuex';
export default {
    data() {
        return {
            show: false,
            colorChecked: false,
            accept: false
        }
    },
    computed: {
        ...mapState('users', ['userInfo', 'hasLogin']),

    },
    components: {
        [NavBar.name]: NavBar,
        [Button.name]: Button,
        [VanImage.name]: VanImage,
        [Popup.name]: Popup,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Switch.name]: Switch,
        [Dialog.name]: Dialog,
    },
    
    methods: {
        onInput(val) {
           if (val) {
            Dialog.confirm({
                title: '提醒',
                message: '是否切换为浅色主题？',
            }).then(() => {
                this.colorChecked = val
                this.$store.commit('color/LIGHT_COLOR')
            });
           }else{
            Dialog.confirm({
                title: '提醒',
                message: '是否切换为深色主题？',
            }).then(() => {
                this.colorChecked = val
                this.$store.commit('color/DARK_COLOR')
            });
           }
        
        },
        set() {
            if (!this.hasLogin) return this.$toast('请先登录后在操作')
            this.show = true
        },
        clearLogin() {
            Dialog.confirm({
                title: '退出',
                message: '您确定要退出登陆吗',
            })
                .then(() => {
                    localStorage.removeItem("token");
                    localStorage.removeItem("uid");
                    localStorage.removeItem("tokenExpired");
                    this.$store.commit('users/clear')

                    this.show = false
                })
                .catch(() => {
                    Dialog.close()
                });

        }
    },

}
</script>

<style lang="less" scoped>
::v-deep .van-cell-group {
    margin-top: 15px;
}

::v-deep .van-hairline--bottom::after {
    border: none;
}

::v-deep .van-nav-bar .van-icon {

    color: #000;
}

::v-deep .van-nav-bar__title {
    color: #000;
}

.myHeader {}


// ::v-deep .van-nav-bar .van-nav-bar__text {
// color: #fff;
// }

.my {
    width: 375px;
    height: 100vh;
    background-color: rgb(248, 248, 248);
}


.header-is {
    box-sizing: border-box;
    padding: 18px 20px;
    width: 100%;

    .h-top {
        .top-l {
            // width: 40%;
            flex: 1;
            display: flex;

            // justify-content: space-between;
            align-items: center;

            span {
                margin-left: 10px;
                width: 50%;
                overflow: hidden;
                /* 超出一行文字自动隐藏 */
                text-overflow: ellipsis;
                /*文字隐藏后添加省略号*/
                white-space: nowrap;
                /*强制不换行*/
            }
        }

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .h-footer {
        margin-top: 10px;
        box-sizing: border-box;
        padding: 8px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;

        span {
            display: block;
            font-size: 12px;
        }

        em {
            font-size: 8px;
        }
    }


}

.header {
    //  height: 208px;
    background: linear-gradient(140deg, #47CACC 0%, #E7B7C8 75%);
    padding: 30px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    em {
        line-height: 2;
        font-size: 24px;
    }
}

.main {
    padding: 0 18px;
    box-sizing: border-box;

    .message {
        background-color: #fff;
        box-sizing: border-box;
        padding: 8px 0;
        display: flex;
        justify-content: space-around;
        align-items: center;

        li {
            text-align: center;

            .icon {
                font-size: 25px;
                color: #e54b43;
            }

            span {
                font-size: 12px;
                display: block;
                line-height: 2;
            }
        }
    }

    .my-publish {
        margin-top: 10px;
        background-color: #fff;
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            font-size: 14px;
        }
    }

    .service {
        margin-top: 10px;
        background-color: #fff;
        box-sizing: border-box;
        width: 100%;

        .top {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 10px;
            position: relative;

            .left {
                font-weight: 500;
                font-size: 16px;
            }

            .right {
                font-size: 14px;
                color: #969799;
            }

            &::after {
                content: '';
                display: block;
                position: absolute;
                width: 90%;
                left: 5%;
                bottom: 0;
                right: 5%;
                height: 1px;

                background-color: #c8c7cc;
            }

        }

        .footer {
            padding-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            // justify-content: space-between;
            li {
                margin-top: 10px;
                text-align: center;
                width: 25%;

                .icon {
                    font-size: 20px;
                }

                span {
                    font-size: 16px;
                    display: block;
                }
            }
        }
    }

}
</style>